<template>
    <!-- 新建区域 -->
    <div class="NewArea">
      <!-- 页面头部和查询区域 -->
      <div class="NewArea-tittle">
        <div class="crumbs">
          <p>
            <span>系统设置 /</span> <span>个人信息 /</span>
          </p>
          <h3>个人信息</h3>
        </div>
      </div>
      <div class="NewArea-content">
        <div class="content-title">
          <span>个人信息</span>
        </div>
        <div class="add">
          <el-form require-asterisk-position="right">
            <el-form-item label="姓名" required="true">
              <el-input
                clearable
                v-model="addData.community"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="微信" required="true">
              <el-input clearable v-model="addData.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="电话号码" required="true">
              <el-input
                type="number"
                clearable
                v-model="addData.serialNo"
                placeholder="请输入"
              />
            </el-form-item>
  
            <el-form-item label="QQ" required="true">
              <el-input
                type="number"
                clearable
                v-model="addData.identificationNumber"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="邮箱" required="true">
              <el-input
                type="number"
                clearable
                v-model="addData.phoneNumber"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="账户" required="true">
              <el-input
                clearable
                disabled
                v-model="addData.certificateFront"
                placeholder="1111"
              />
            </el-form-item>
            <el-form-item label="密码" required="true">
              <el-input
              type="password"
                clearable
                v-model="addData.certificateBack"
                placeholder="请输入"
              />
            </el-form-item>
          </el-form>
  
          <div style="padding-left: 75px">
            <el-button type="primary" @click="add">提交</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import http from "../../utils/http";
  import { ElMessage } from "element-plus";
  import router from "../../router";
  
  const radio1 = ref("1");
  
  let addData = ref({
    community: "李四",
    name: "15191851",
    serialNo: "1111",
    identificationNumber: "1651511",
    relationships: "",
    phoneNumber: "225215",
    note: "",
    certificateFront: "1111",
    certificateBack: "5d15b589d37c26571370e4e6c1f1b2a1",
    sex: "",
    communityId: 1,
  });
  
  
  
  
  //提交
  let add = () => {
    http({
      url: "/householdManagement/add",
      method: "POST",
      data: addData.value,
    }).then(({ data }) => {
      console.log(data);
      if (data.code == 0) {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        setTimeout(() => {
          router.push("/home/HouseholdManagement");
        }, 1500);
      } else {
        ElMessage.error("新增失败");
      }
    });
  };
  
  //返回
  let back = () => {
    router.push("/home/HouseholdManagement");
  };
  
  onMounted(() => {
    console.log("挂载后");
  });
  </script>
  
  <style lang="less" scoped>
  .NewArea {
    width: 90%;
    // height: 100%;
    margin: auto;
    .NewArea-tittle {
      margin-top: 20px;
      background-color: white;
      .crumbs {
        padding: 15px 20px;
        font-size: 16px;
        p {
          margin-bottom: 10px;
          span {
            color: #8d8d8d;
          }
          span:last-child {
            color: #000;
          }
        }
      }
    }
    .NewArea-content {
      padding: 15px 20px;
      margin-top: 20px;
      background-color: white;
  
      .content-title {
        width: 96%;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .add {
        width: 500px;
        margin: auto;
        .el-form-item {
          margin-bottom: 30px;
          position: relative;
          .pos {
            position: absolute;
            top: 0;
            right: 50px;
          }
        }
        .el-input,
        .el-textarea {
          width: 350px;
        }
      }
    }
  }
  </style>
  